<template>
  <div class="about">
    <h1>关于页面</h1>
    <router-link to="/about/aboutone">
        新闻
    </router-link>|
     <router-link to="/about/abouttwo">
        汽车
    </router-link>
    
    <!-- 页面想显示子路由  书写router-view  -->
   <!-- keepalive 有俩个属性include白名单，enclude黑名单，不缓存组件，
     includes 和excludes 属性值是组件的name  -->
     <keep-alive include="abone,abthree" enclude="abtwo">
           <router-view></router-view>
     </keep-alive>
  </div>
</template>
<script>
// keepalive   是vue的缓存组件
//  能缓存 组件的所有操作状态
// keepAlive 组件一般包裹动态组件component，路由出口router-view 
 
// keepAlive 组件如何理解
// 是vue的缓存组件，可以保留组件的状态
// keepalive会产生俩个生命周期，activated 组件激活deactivated 组件的失活
// keepAlive组件 有俩个属性include白名单，enclude黑名单，不缓存组件，
// 在项目中 配置router-view和 路由中的meta信息，控制是否缓存当前组件


export default {
  
}
</script>

<style lang="less" scoped>
//自定义 router-link  激活样式的class名
  .router-link-exact-active{
     font-size:20px; 
      color:red;
  }
</style>
